<template>
	<div class="container-filled">
		<el-container>
			<el-main style="padding:0;">
				<!-- 展示表格 -->
				<el-table v-loading="loading" :data="filterTableData" v-if="filterTableData" :default-sort="{ prop: 'movieTime' }">
					<!-- 列展示 -->
					<el-table-column v-for="item in elTableColumns" :prop="item.prop" :label="item.label"
						:width="item.width" show-overflow-tooltip />
					<el-table-column prop="movieTime" label="上映时间" sortable width="180" />
					<el-table-column label="操作" fixed="right">
						<!-- 列头搜索框 -->
						<template #header>
							<el-input v-model="search" size="small" placeholder="搜索电影名称" />
						</template>
						<!-- 默认列数据 -->
						<template v-slot="scope" #default>
							<el-button type="primary" size="small" @click="updataRow(scope.row)" link>更新
							</el-button>
							<el-button type="danger" size="small" @click="delMovieData(scope.row._id)" link>删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-main>
			<!-- 分页模块 -->
			<el-footer>
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" :total="total" :current-page="pageNum"
					:default-page-size="pageSize" style="margin:1em auto;" />
			</el-footer>
			<!-- 下载数据按钮 -->
			<el-button type="success" @click="serverDataToExcel">下载数据</el-button>
			<!-- 编辑框 -->
			<el-dialog v-model="centerDialogVisible" :title="nowMovieRow.movieName" width="40%" destroy-on-close center>
				<div>
					<el-form :model="nowMovieRow" label-width="120px">
						<el-form-item label="电影名称">
							<el-input v-model="nowMovieRow.movieName" />
						</el-form-item>
						<el-form-item label="电影图片路径">
							<el-input v-model="nowMovieRow.movieImg" />
						</el-form-item>
						<el-form-item label="电影类型">
							<el-select v-model="nowMovieRow.movieCategory" multiple placeholder="请选择类型"
								style="width: 240px">
								<el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="电影简介">
							<el-input v-model="nowMovieRow.movieContext" type="textarea" rows="5" />
						</el-form-item>
						<el-form-item label="主页推荐">
							<el-switch v-model="nowMovieRow.movieMainPage" class="mb-2"
								style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="推荐"
								inactive-text="不推荐" />
						</el-form-item>

					</el-form>
				</div>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="centerDialogVisible = false">取消</el-button>
						<el-button type="primary" @click="updataMovie">
							更新
						</el-button>
					</span>
				</template>
			</el-dialog>
		</el-container>
	</div>
</template>
<script setup>
import { ElMessage, ElLoading } from "element-plus"
import { ref } from 'vue'
import api from "../../api/api"
import transformDate from "../../utils/transformDate"
// 引入电影类型数组
import movieCategoryOptions from "../../utils/movieCategoryOptions"
// 使用hook
import useList from "../../hooks/useList"
const {
	loading,
	reload,
	pageNum,
	pageSize,
	total,
	search,
	filterTableData,
	handleSizeChange,
	handleCurrentChange,
	serverDataToExcel
} = useList("/admin/movie", "movieName", (data) => {
	data.forEach(x => {
		x.movieCategory = x.movieCategory.split(",")
		x.movieTime = transformDate(x.movieTime)
	})
	return data
},'/admin/download/movie',"电影数据")
const elTableColumns = ref([
	{
		prop: "movieName",
		label: "电影名称",
		width: ""
	}, {
		prop: "movieCategory",
		label: "电影类型",
		width: ""
	}, {
		prop: "movieArea",
		label: "上映地区",
		width: ""
	}, {
		prop: "movieContext",
		label: "电影简介",
		width: ""
	}, {
		prop: "movieNumSuppose",
		label: "点赞数",
		width: ""
	}, {
		prop: "movieNumDownload",
		label: "下载数",
		width: ""
	},
	{
		prop: "movieMainPage",
		label: "主页推荐",
		width: ""
	}
]),
	centerDialogVisible = ref(false),
	nowMovieRow = ref({}),
	categoryOptions = movieCategoryOptions

// 点击弹出更新框
function updataRow(val) {
	nowMovieRow.value = val
	centerDialogVisible.value = true
}
// 更新数据
function updataMovie() {
	api.put("/admin/movie/" + nowMovieRow.value._id,
		{
			movieName: nowMovieRow.value.movieName,
			movieImg: nowMovieRow.value.movieImg,
			movieContext: nowMovieRow.value.movieContext,
			movieCategory: nowMovieRow.value.movieCategory.toString(),
			movieMainPage: nowMovieRow.value.movieMainPage,
		}
	).then(() => {
		ElMessage.success("更新成功!")
		centerDialogVisible.value = false
	})
}
// 删除数据
function delMovieData(id) {
	api.delete(`/admin/movie/${id}`).then((res) => {
		if (res.data.status === 0) {
			ElMessage.success(res.data.message)
			// 删除成功后更新列表
			reload()
		} else {
			ElMessage.error(res.data.msg)
		}
	})
}
</script>
<style lang="sass" scoped>
</style>